/*
 * Creator:     ML
 * CreatDate:   2019-10-22
 * descripts：  检查其他项目事项
 * */
import React from 'react';
import { Form, Input, Select, Button, message, Row, Icon, Divider, Popconfirm, DatePicker,Table,Col,Card } from 'antd';
import { $http } from 'containers/config/https';
import moment from 'moment';
import store from 'store';
import '../style/childStyle.less';
import CommonPagination from 'components/pagination/index';
import OtherItemnewDetail from '../component/OtherItemnewDetail'

// import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';

const { Option } = Select;

class OtherItem extends React.Component {
  constructor() {
    super();
    var userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      tableData: [], // 列表数据
      total: 0,
      page: 1,
      pageSize: 10,
      size:"small",
      search:"",
    };
  }

  componentDidMount() {
    document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 'px';
    if(this.state.size=="small"){
      this.setState({
        pageSize:10
      })
    }else{
      this.setState({
        pageSize:50
      })
    }
    this.getFindDate()
  }

//调子组件
onOthRef=(ref)=>{
  this.childOth=ref
}
   // 点击查询
   handleQuery = () => {
    this.props.form.validateFields((err, values) => {
      if(!err){
        this.setState({
          values,
          rowIds:""
        },()=>{
          setTimeout(()=>{
            this.childOth.clearInfo()
          },100)
          this.getFindDate(this.state.values)
        })
  }
})
   }
  //查询
  getFindDate=(values,e)=>{
    let { page, pageSize, } = this.state;
    let data = {
      params: [{
      code: values&&values.code || "",
      descripts:values&&values.dec || "",
      status:values&&values.status || "",
      }],
      pagination: [{
        pageSize: pageSize,
        currentPage: page,
      }]
    }
    $http.post('urlS', this, {
      code: '03010088',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({
            search:e,
            tableData:res.result.Data,
            total:res.result.TotalCount,
          })
        }
      }
    })
  }
      // 修改page和pageSize 跳转至---
      onChange = (e) => {
        this.setState({ page: e, pageSize:this.state.pageSize, }, () => {
          // 重新调用查询方法
          let { values } = this.state;
          this.getFindDate(values);
        })
      }
      //下拉选择页数
      onShowSizeChange = (page, pageSize) => {
        // console.log("page",page,"pagesize",pageSize)
        this.setState({ page: 1, pageSize: pageSize }, () => {
          // 重新调用查询方法
          let { values } = this.state;
          this.getFindDate(values,"search");
        })
      }
      // 显示分页总条数
      showTotal(total) {
        return `共 ${total} 条`;
      }
  
  //点击Row
  onClickRow = (record) => {
    return {
      onClick: () => {
        this.setState({
          parms: record,
        })
        this.childOth.clearInfo()
        if (this.state.rowIds === "") {
          this.setState({
            rowIds: record.otherItemId,
          })
          this.childOth.getInfo(record)
        } else {
          if (this.state.rowIds !== record.otherItemId) {
            this.setState({
              rowIds: record.otherItemId,
            });
            this.childOth.getInfo(record)
          } else {
            this.setState({
              rowIds: "",
            });
            this.childOth.clearInfo()
          }
        }
      },
    };
  }
  //重置后回归到初始状态
  clearRow=()=>{
    this.setState({
      rowIds: "",
    })
  }
   //点击查询后 表格行
   setRowClassNames = (record) => {
    return record.otherItemId === this.state.rowIds ? 'clickRowStyle' : '';
  }
  render() {
    const { tableData, total, page, rowData } = this.state;

    const { getFieldDecorator } = this.props.form;
    const columns = [
      {
        title: '代码',
        dataIndex: 'otherItemCode',
        width: 120,
        key: 'patName',
        align: "center",
      }, {
        title: '描述',
        dataIndex: 'otherItemDesc',
        width: 120,
        align: "center",
        key: '1'
      }, {
        title: '字段类型',
        dataIndex: 'fieldTypeDesc',
        width: 200,
        align: "center",
        key: '2'
      }, {
        title: 'TableData',
        dataIndex: 'tableData',
        width: 200,
        align: "center",
        key: '3'
      }, {
        title: 'FieldUnit',
        dataIndex: 'FieldUnit',
        width: 80,
        align: "center",
        key: '4'
      }, {
        title: '生效状态',
        dataIndex: 'status',
        width: 135,
        align: "center",
        key: '5',
        render: (text, record, index) => {
          if (text == "Y") {
            text = "生效"
            return text
          } if (text == "N") {
            text = "失效"
            return text
          }
          return text;
        },
      },]

    const formLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
    }
const selectData = [
  {
    id:"",
    descripts:"全部"
  },
  {
    id:"Y",
    descripts:"可用"
  },
  {
    id:"N",
    descripts:"不可用"
  }
]
    // 状态选择
    let statusOpt = [];
    selectData && selectData.map((item, index) => {
      statusOpt.push(<Option key={index} value={item.id} title={item.descripts} >{item.descripts}</Option>)
    });

    return (
       <div>
      <div>
        <Form layout={'horizontal'}>
          <Row>
            <Col span={4}>
              <Form.Item label="代码" {...formLayout}>
                {getFieldDecorator('code', {
                  rules: [{ required: false, message: '请输入' }]
                })(
                 <Input onPressEnter={this.handleQuery}></Input>
                )}
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item label='描述' {...formLayout}>
                {getFieldDecorator('dec', {
                  rules: [{ required: false, message: '' }],
                })(
                  <Input onPressEnter={this.handleQuery}></Input>
                )}
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item label='状态' {...formLayout}>
                {getFieldDecorator('status', {
                  rules: [{ required: false, message: '' }],
                })(
                  <Select  allowClear style={{ width: '100%' }} placeholder="请选择">
                  {statusOpt}
                </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={4}>
              <Button style={{ margin: '3px 0 0 10px' }} type="primary" onClick={this.handleQuery}>查询</Button>
            </Col>
          </Row>
        </Form>
      </div>
      <Row>
        <Col span={8}>
        <Card>
        <Table
                columns={columns}
                dataSource={this.state.tableData}
                pagination={false}
                rowKey={record => record.key}
                onRow={this.onClickRow}
                rowClassName={this.setRowClassNames}
                bordered
                style={{ height: store.getState().tableHeight.y  +  'px' }}
              />
               <CommonPagination size={this.state.size} current={this.state.page} total={this.state.total} search={this.state.search}
                    onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.tableData}
                    onChange={this.onChange.bind(this)} />
        </Card>
        </Col>
        <Col span= {16} style={{marginLeft:"-1px"}}>
        <Card>
            <OtherItemnewDetail onOthRef={this.onOthRef} handleQuery={this.handleQuery} clearRow={this.clearRow}></OtherItemnewDetail>
        </Card>
        </Col>
      </Row>

      </div>
    )
  }
};
const OtherItemnew = Form.create()(OtherItem);
export default OtherItemnew;